<template>
  <div class="info-wrap">
    <Title title="上刊价格" style="font-size:16px; margin:32px 0 16px 0">
      <div  class="update-time"><img :src="timeIcon" alt="">最近更新时间：<span class="text">{{ format(detailInfo.additionalKey.priceUpdateTime, 'YYYY/MM/DD HH:mm') }}</span></div>
    </Title>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <template v-if="isJournalPlatform && !kuaiShou">
        <!-- 小红书-->
        <template v-if="isRedBook">
          <template v-for="(tableColumns, tableIndex) in readBookColumns">
            <el-table :key="tableIndex" :data="redBookData" :border="true" :style="{marginTop: tableIndex !== 0 ? '16px' : ''}">
              <el-table-column
                v-for="column in tableColumns"
                :key="column.keyword + column.subKeyword"
                :min-width="column.width || defaultWidth">
                <template slot="header" slot-scope="scope">
                  <div class="table-header">
                    <span class="label">{{ column.label }}</span>
                    <tip-icon
                      v-if="redBookData.length"
                      :img-height="16"
                      :img-width="16"
                      :content="`数据更新时间：${format(redBookData[0][column.keyword].updateTime,'YYYY/MM/DD HH:mm')}<br/>数据来源：${redBookData[0][column.keyword].dataSources?redBookData[0][column.keyword].dataSources:'--'}`"
                      use-html/>
                  </div>
                </template>
                <template slot-scope="scope">
                  <ToolTip
                    :content="scope.row[column.keyword][column.subKeyword] | numberTextFormat(2)"
                    :tool-tip="scope.row[column.keyword][column.subKeyword] | moneyFilter" />
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>
        <!-- 其他上刊平台 -->
        <template v-else>
          <el-table :data="journalTableData" :cell-class-name="tableCellClass" :border="true">
            <el-table-column width="110px">
              <template slot-scope="scope">
                <div class="table-header" >
                  <span class="label">{{ scope.row.name }}</span>
                  <tip-icon :content="`即本月平台价格<br/>数据更新时间：${format(scope.row.updateTime,'YYYY/MM/DD HH:mm')}<br/>数据来源：${scope.row.dataSources?scope.row.dataSources:'--'}`" use-html/>
                </div>
              </template>
            </el-table-column>
            <el-table-column v-for="column in journalTableColumns" :key="column.name" :label="column.name" :min-width="column.width || defaultWidth">
              <template slot-scope="scope">
                <ToolTip
                  :content="scope.row[column.keyword] | numberTextFormat(2)"
                  :tool-tip="scope.row[column.keyword] | moneyFilter" />
              </template>
            </el-table-column>
          </el-table>
        </template>
      </template>
      <!-- 更多价格 -->
      <el-table v-if="detailInfo.morePriceInfo.dynamicKey && detailInfo.morePriceInfo.dynamicKey.length" :data="morePriceData" :cell-class-name="tableCellClass" :border="true" class="mt16">
        <el-table-column prop="name" width="90px"/>
        <el-table-column v-for="column in morePriceColumns" :key="column.name" :label="column.label" :min-width="column.width || defaultWidth">
          <template slot="header" slot-scope="scope">
            <ToolTip :content="scope.column.label"/>
          </template>
          <template slot-scope="scope">
            <ToolTip :content="scope.row[column.key]"/>
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="20" :class="{'dividing': !showMobilePage, 'mt16': kuaiShou || handleField(detailInfo.journalKey.dynamicKey).length}">
        <template v-if="kuaiShou">
          <el-col :span="8" class="label-collapse">
            <el-form-item label="短视频报价-不含平台费：" style="margin-bottom: 0px;">
              <ToolTip
                :content="detailInfo.additionalKey.shortVideoPrice | numberTextFormat(2)"
                :tool-tip="detailInfo.additionalKey.shortVideoPrice | moneyFilter" />
            </el-form-item>
          </el-col>
        </template>
        <!-- 自定义字段 -->
        <el-col v-for="(item,index) in handleField(detailInfo.journalKey.dynamicKey)" :span="8" :key="index">
          <el-form-item :prop="item.name" style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${item.name}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${item.name}：` }}
              </div>
            </el-tooltip>
            <ToolTip :content="item.value" placement="top"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import mixins from './mixins';
import timeIcon from '@/assets/cacheTime.png';
import { numberTextFormat, moneyFilter } from '@/filters/number';
import { getJournalFields } from '@/views/resource/create/resourceData';

export default {
  components: {
    Title
  },
  filters: { numberTextFormat, moneyFilter },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    },
    isCommon: {
      type: Boolean,
      default: false
    },
    isRedBook: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timeIcon,
      defaultWidth: '160px'
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    readBookColumns() {
      return [
        [
          { label: '本月报备价(图文)', keyword: 'monthReportPrice', subKeyword: 'imageTextPrice' },
          { label: '本月报备价(视频)', keyword: 'monthReportPrice', subKeyword: 'videoPrice' },
          { label: '本月非报备价(图文)', keyword: 'monthNotReportPrice', subKeyword: 'imageTextPrice' },
          { label: '本月非报备价(视频)', keyword: 'monthNotReportPrice', subKeyword: 'videoPrice' }
        ],
        [
          { label: '次月报备价(图文)', keyword: 'nextMonthReportPrice', subKeyword: 'imageTextPrice' },
          { label: '次月报备价(视频)', keyword: 'nextMonthReportPrice', subKeyword: 'videoPrice' },
          { label: '次月非报备价(图文)', keyword: 'nextMonthNotReportPrice', subKeyword: 'imageTextPrice' },
          { label: '次月非报备价(视频)', keyword: 'nextMonthNotReportPrice', subKeyword: 'videoPrice' }
        ]
      ];
    },
    redBookData() {
      if (!this.detailInfo.additionalKey) return [];
      const { monthReportPrice, nextMonthReportPrice, monthNotReportPrice, nextMonthNotReportPrice, nextMonthReportInquiryPrice, nextMonthNotReportInquiryPrice } = this.detailInfo.additionalKey;
      return [{
        monthReportPrice,
        nextMonthReportPrice,
        monthNotReportPrice,
        nextMonthNotReportPrice,
        nextMonthReportInquiryPrice,
        nextMonthNotReportInquiryPrice
      }];
    },
    journalTableData() {
      if (!this.detailInfo.additionalKey) return [];
      const keyMap = [
        { name: '刊例价格' }
      ];
      const result = [];
      keyMap.forEach(j => {
        result.push({
          name: j.name,
          ...this.detailInfo.additionalKey.articlesPrice
        });
      });
      return result;
    },
    kuaiShou() {
      return this.detailInfo.platformTypeName === '快手';
    },
    journalTableColumns() {
      const platformTypeName = this.detailInfo.platformTypeName;
      return getJournalFields(platformTypeName);
    },
    morePriceColumns() {
      if (!this.detailInfo.morePriceInfo.dynamicKey.length) return [];
      const fields = this.handleField(this.detailInfo.morePriceInfo.dynamicKey);
      const columns = [];
      fields.forEach(field => {
        columns.push({
          label: field.name,
          key: field.id
        });
      });
      return columns;
    },
    morePriceData() {
      if (!this.detailInfo.morePriceInfo.dynamicKey.length) return [];
      const fields = this.handleField(this.detailInfo.morePriceInfo.dynamicKey);
      const keyMap = [
        { name: '更多价格' }
      ];
      const result = [];
      keyMap.forEach(j => {
        const item = { name: j.name };
        fields.forEach(field => {
          item[field.id] = field.value;
        });
        result.push(item);
      });
      return result;
    }
  },
  methods: {
    format,
    tableCellClass({ columnIndex }) {
      if (columnIndex === 0) {
        return 'cellBg';
      }
      return '';
    }
  }
};
</script>
<style lang="scss" scoped>
  .table-header {
    display: flex;
    align-items: center;
    .label {
      white-space: nowrap;
      margin-right: 4px;
    }
  }
.update-time {
  display: flex;
  align-items: center;
  background: #FAFAFC;
  padding: 6px 8px;
  font-size: 12px;
  margin-left: 8px;
  border-radius: 4px;
  color: #999999;
  img {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
  .text {
    color: #5F77C3;
    font-size: 14px;
    font-weight: bold;
  }
}
</style>
